<template>
  <div class="boxs margin_top">
    <headers :pageindex="0"></headers>
    <swiper ref="swiper">

    </swiper>
    <!-- <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in photo" :key="index">
          <img class="swiperimg" :src="item.img" alt="">
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div> -->
    <div class="width1300">


      <!-- <titleline :miantitle="'Case presentation'" :explaintitle="'案例展示'"></titleline> -->
      <!-- 移动端 -->
      <!-- <div class="swiper-anli " v-if="ismobile">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in swiperlist" :key="index">
            <img class="swiperimg" :src="item.img" alt="">
          </div>
        </div>
      </div> -->
      <!-- <div class="slideshow" v-if="ismobile">
        <div class="swiper-anli">
          <div class="swiper-wrapper">
            <div v-for="(item, i) in swiperlist" :key="i" class="swiper-slide">
            
      <div class="slideshowtext">{{ item.text }}</div>
      <img :src="item.img" alt="商品图片" />
    </div>
  </div>
  </div>
  </div>
  </div> -->
      <!-- <div class="width1300" v-if="!ismobile">
      <div class=" anlibox ispc">
        <div class="anli">
          <div class="anli_list" v-for="(item, index) in swiperlist">
            <img src="../assets/images/1-321.jpg" alt="">
          </div>
        </div>
      </div> -->
    </div>
    <div>
      <div class="width1300">
        <titleline :miantitle="'Case presentation'" :explaintitle="'案例展示'"></titleline>
      </div>
      <hengscroll :swiperlist='anli1'></hengscroll>
      <hengscroll :swiperlist='anli2' :fan="true"></hengscroll>
      <!-- <hengscroll></hengscroll> -->

    </div>

    <div class="width1300">
      <titleline :miantitle="'Main products promoted'" :explaintitle="'我们主推的产品'"></titleline>
    </div>



    <!-- pc端产品视频 -->
    <div class=" videopcbox" :class="!ismobile ? 'ispc ' : 'ismobiles videopcboxm'">
      <div class="videobox " :class="!ismobile ? 'width1300 ' : ''">
        <div class="pcvideo" v-if="video.length">
          <video autoplay controls muted loop :src="video[0].logo" style="position: relative" x5-video-player-type="h5"
            playsinline webkit-playsinline>
          </video>
        </div>
        <div class="word">
          <div class="animated fadeInRight wow">
            <div>我们主推的产品</div>
            <div v-if="!ismobile">《邀星防伪系统》</div>
            <div v-if="!ismobile">
              随着产品的多样性和安全性，为确保正品的安全，独立的安全防伪是必不可少的，邀星防伪系统，最大化的保障商家正品安全！
            </div>
            <div class="btn shouzhi" v-if="!ismobile" @click="fangwei">了解更多</div>
          </div>
        </div>
      </div>
    </div>
    <div class="titlebig" v-if="ismobile">
      <div class="animated fadeInRight wow">邀星防伪系统</div>
      <div class=" animated bounceInRight wow">随着产品的多样性和安全性，为确保正品的安全，独立的安全防伪是必不可少的，邀星防伪系统，最大化的保障商家正品安全！</div>
    </div>

    <div class="btn btnm shouzhi" v-if="ismobile" @click="fangwei">了解更多</div>
    <div class="width1300" style="margin-bottom: 30px;">
      <titleline :miantitle="'Cooperative partner'" :explaintitle="'合作伙伴'"></titleline>
      <!-- PC -->
      <div class="logolist ispc" v-if="!ismobile">
        <div class="centerline animated fadeInUp wow">
          <img v-for="(item, index) in logolist" :src="item.logo" loading="lazy" v-if="index < 6" @click="goother(index)">
        </div>
        <div class="centerline animated fadeInUp wow">
          <img loading="lazy" style="opacity: 0;">
          <img loading="lazy" style="opacity: 0;">
          <img v-for="(item, index) in logolist" :src="item.logo" loading="lazy" v-if="index >= 6"
            @click="goother(index)">
          <img loading="lazy" style="opacity: 0;">
          <img loading="lazy" style="opacity: 0;">
        </div>
      </div>
      <!-- animated fadeInUp -->
      <div class="logolist_m    wow bounceInUp " v-if="ismobile">
        <div class="imge" v-for="(item, index) in logolist" @click="goother(index)"> <img :src="item.logo" loading="lazy">
        </div>

      </div>
    </div>
    <bottoms></bottoms>
  </div>
</template>

<script>


import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import { WOW } from "wowjs";
import bottoms from "./modle/bottoms.vue"
import swiper from "./modle/swiper.vue"
import headers from "./modle/headers.vue"
import titleline from "./modle/titleline.vue"
import hengscroll from "./modle/hengscroll.vue"
export default {
  name: 'HelloWorld',
  components: {
    headers,
    bottoms,
    swiper,
    titleline,
    hengscroll
  },
  data() {
    return {
      anli1: [],
      anli2: [],
      listanli: [],
      video: "",
      logolist: [],
      pictures: [
        {
          advertiseImages: require('../assets/images/8-514-639.jpg'),
          text: "海报名称一",
        },
        {
          advertiseImages: require('../assets/images/8-514-639.jpg'),
          text: "海报名称二",
        },
        {
          advertiseImages: require('../assets/images/8-514-639.jpg'),
          text: "海报名称三",
        },
      ],
      ismobile: false,
      bannerlist: []
    }
  },
  created() {
    this.get_partners()
    this.get_banner()
    this.get_video()
    this.getanlilist()
  },
  methods: {
    getanlilist() {
      this.$api.get(
        "/api/PortalHome/get_all_tool",
        {
          page_index: 1,
          page_size: 20
        },
        (r) => {
          this.listanli = r.DATA
          let half = Math.ceil(20 / 2);
          if (half > 9) {
            half = 9
          }
          this.anli1 = this.listanli.splice(0, half)
          this.anli2 = this.listanli.splice(-half)
        },
        (f) => { }
      );
    },
    //主推的产品 了解更多按钮跳转到防伪页面
    fangwei() {
      this.$router.push({
        path: '/anti_fake',
        query: {
          id: 1
        }
      })
    },
    goother(index) {
      window.open(this.logolist[index].website)
    },
    get_video() {
      this.$axios.get("/api/video/get_video").then(res => {
        this.video = res.data.data
      })
    },
    get_partners() {
      this.$axios.get("/api/partners/get_partners").then(res => {
        this.logolist = res.data.data
      })
    },
    get_banner() {
    },
    get_partners() {
      this.$api.get(
        "/api/PortalHome/get_partners",
        {
          is_main: true
        },
        (r) => {
          this.logolist = r.DATA
        },
        (f) => { }
      );
    },
    // 获取banner
    get_banner() {
      this.$api.get(
        "/api/PortalHome/get_notice",
        {
          notice_type: 2
        },
        (r) => {
          this.bannerlist = r.DATA
          this.$refs.swiper.lunbo(this.bannerlist)
        },
        (f) => { }
      );
    },
    // 获取主推视频
    get_video() {
      this.$api.get(
        "/api/PortalHome/get_notice",
        {
          notice_type: 4
        },
        (r) => {
          this.video = r.DATA
        },
        (f) => { }
      );
    },
  },
  mounted() {

    this.ismobile = this.isMobile()
    let that = this;
    window.addEventListener('resize', function () {
      that.ismobile = that.isMobile()
    });

    //第一种写法，可以设置wow中属性
    this.$nextTick(() => {
      // 在dom渲染完后,再执行动画
      var wow = new WOW({
        boxClass: "wow", ///动画元件css类（默认为wow）
        animateClass: "animated", //动画css类（默认为animated）
        offset: 50, //到元素距离触发动画（当默认为0）
        mobile: true, //在移动设备上触发动画（默认为true）
        live: true, //对异步加载的内容进行操作（默认为true）
      });
      wow.init();
    });
    //第二种写法，默认属性
    // setTimeout(() => {
    //   this.$nextTick(() => { // 在dom渲染完后,再执行动画
    //     new WOW().init();
    //   })

    // }, 500);


    // 案例展示轮播图
    // new Swiper('.swiper-anli', {
    //   loop: true,
    //   direction: "horizontal",
    //   loop: true,
    //   centeredSlides: true,
    //   spaceBetween: 1,
    //   observer: true,
    //   observeParents: true,
    //   autoplay: {
    //     delay: 100000,
    //     stopOnLastSlide: false,
    //     disableOnInteraction: false,
    //     pagination: {
    //       el: '.swiper-pagination',
    //       // dynamicBullets: true,
    //       // dynamicMainBullets: 2,
    //       clickable: true,
    //     },
    //   },
    // })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.mobe {
  .anli_list {
    background: none !important;
    width: 3rem !important;
    padding: 0 !important;
  }
}

.anli_list {
  padding: 0 !important;
}


.logolist_m {
  padding: 0 40px;
  overflow: hidden;

  .imge {
    width: 43%;

    >img {
      width: 43%;
      width: 100%;
    }
  }

  >.imge:nth-child(odd) {
    float: left;
    clear: both;
  }

  >.imge:nth-child(even) {
    float: right;
  }
}

.logolist {
  .centerline {
    img {
      width: 15%;
      margin-left: 1%;
      display: inline-block;
    }
  }
}

.titlebig {
  padding: 1.5rem;
  height: 8rem;
  overflow: hidden;

  >div:nth-child(1) {
    font-size: 1.2rem;
    color: #404040;
    font-weight: 700;
  }

  >div:nth-child(2) {
    font-size: 0.9rem;
    color: #808080;
    margin-top: 0.6rem;
  }
}

.btn {
  width: 100%;
  border: 1px solid #fff;
  border-radius: 12px;
  color: #fff;
  transition: color 0.20s, border-color 0.20s, background-color 0.20s, background-image 0.20s;
  transition-timing-function: linear;
  text-align: center;
  line-height: 51px;
  margin-top: 30px;
  font-size: 20px;
}

.videobox {
  margin: 0 auto;
  display: flex;

  .word {
    width: 30%;
    float: left;
    color: white;

    >div {
      box-sizing: border-box;
      width: 100%;
      padding: 40px;

      div:nth-child(1) {
        font-size: 26px;
        font-weight: bold;
        text-align: center;
      }

      div:nth-child(2) {
        font-size: 20px;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 40px;
      }

      div:nth-child(3) {
        font-size: 18px;
        line-height: 36px;
      }
    }
  }

  >.pcvideo {
    width: 70%;
    float: left;

    video {
      width: 100%;
    }
  }
}

.videopcbox {
  width: 100%;
  background-color: #009aff;
  padding: 60px 0;
}

.video {
  width: 100%;
}

.anlibox {
  width: 100%;

  .anli {
    overflow: hidden;
  }

  .anli_list {
    float: left;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
    transition: color 0.20s, border-color 0.20s,
      background-color 0.20s, background-image 0.20s;
    transition-timing-function: linear;

    >img {
      display: block;
      margin: 0 auto
    }
  }
}

.anli_list:hover {
  background-color: #0cc081;
  background-clip: padding-box;
  border-color: #000;
  color: #000;
}

@media (max-width: 3300px) {
  .margin_top {
    margin-top: 110px;
  }

  .anli_list {
    // padding: 44px;
    width: 33.33%;

    img {
      width: 100%;
      // width: 343px;
    }
  }
}

.videopcboxm {
  padding: 1rem 0 !important;
}

.btnm {
  width: 90%;
  border: 1px solid rgb(85, 85, 85);
  margin: 0 auto;
  border-radius: 0.3rem;
  color: rgb(32, 32, 32);
  transition: color 0.20s, border-color 0.20s, background-color 0.20s, background-image 0.20s;
  transition-timing-function: linear;
  text-align: center;
  line-height: 1.9rem;
  margin-top: 1rem;
  font-size: 0.9rem;
}

.ismobiles {



  .videobox {
    display: block;
  }

  .pcvideo {
    width: 90% !important;
    float: none;
    margin: 0 auto;
  }

  .word {
    float: none;
    font-size: 1rem;
    clear: both;
    width: 100%;

    >div {
      box-sizing: border-box;
      width: 100%;
      padding: 1rem;

      div:nth-child(1) {
        font-size: 1.2rem;
        font-weight: bold;
        text-align: center;
      }

      div:nth-child(2) {
        font-size: 1rem;
        text-align: center;
        margin-top: 0.7rem;
        margin-bottom: 0.3rem;
      }

      div:nth-child(3) {
        font-size: 1rem;
        line-height: 1.5rem;
        margin-top: 0.7rem;
      }
    }

  }

}

@media (max-width: 1120px) {}

@media (max-width: 1000px) {
  .margin_top {
    margin-top: 0px;
  }
}

.boxs {
  width: 100%;
  // max-width: 1300px;
  // margin: 0 auto;
  overflow: hidden;
}

.width1300 {

  max-width: 1300px;
  margin: 0 auto;
  overflow: hidden;
}



.ispcbigs {
  .anli {
    display: inline-flex;
    gap: var(--lp-pad-3);
    will-change: transform;

    .anli_list {
      min-width: 10rem;
      max-width: 609px;
      width: 30rem;
      float: none;
    }
  }

}
</style>
